<template>

  <div>
    <template v-for="(item,index3) in itemData">
      <template v-if="item.length>0">
        <div v-if="item.type===1">
          <el-row>
            <el-col :span="6">{{rentalType[Number(item.rentalType)]}}</el-col>
            <el-col :span="10">预取:{{ item.actualStartTime }}</el-col>
            <el-col :span="8">{{ item.takeStoreName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">{{rentalType[Number(item.rentalType)]}}</el-col>
            <el-col :span="10">预还:{{ item.actualEndTime }}</el-col>
            <el-col :span="8">{{ item.alsoStoreName }}</el-col>
          </el-row>
          <el-row style="text-align: right !important;">
            <el-button v-if="item.length>1" type="primary" @click="showOrderOverviewDialog(item, true, scope.row.carNo)">查看</el-button>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="14"> 客户姓名: {{item.memberName}}/{{ item.memberPhone }}</el-col>
            <el-col :span="10" class="pop-text-wrap">
              <el-tag type="success" v-for="(label, index) in item.labelClassify" :key="index">
                <dict-tag :options="dict.type.label_classify" :value="label" />
              </el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16" v-if="item.carNo"> 车辆: {{ item.carNo }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="16"> 订单来源: {{ item.orderSourceName }}</el-col>
            <el-col :span="8" style="color: #FF9F24" class="pop-text-wrap">预约订单</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">订单编号: {{ item.orderNo }}</el-col>
          </el-row>
          <el-row v-if="item.isItAWarning==1">
            <el-col :span="24" style="color: #F5242F">前一订单逾期还车，可能影响此订单，请注意重新排车</el-col>
          </el-row>
        </div>
        <div v-if="item.type===2">
          <el-row>
            <el-col :span="6">{{rentalType[Number(item.rentalType)]}}</el-col>
            <el-col :span="10">实取:{{ item.actualStartTime }}</el-col>
            <el-col :span="8">{{ item.takeStoreName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">{{rentalType[Number(item.rentalType)]}}</el-col>
            <el-col :span="10" v-if="item.orderStatus>4">实还:{{ item.actualEndTime }}</el-col>
            <el-col :span="10" v-else>预还:{{ item.actualEndTime }}</el-col>
            <el-col :span="8">{{ item.alsoStoreName }}</el-col>
          </el-row>

          <el-row style="text-align: right !important;">
            <el-button v-if="item.length>1" type="primary" @click="showOrderOverviewDialog(item, true, scope.row.carNo)">查看</el-button>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="14"> 客户姓名: {{item.memberName}}/{{ item.memberPhone }}</el-col>
            <el-col :span="10" class="pop-text-wrap">
              <el-tag type="success" v-for="(label, index) in item.labelClassify" :key="index">
                <dict-tag :options="dict.type.label_classify" :value="label"/>
              </el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16" v-if="item.carNo"> 车辆: {{ item.carNo }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="14"> 订单来源: {{ item.orderSourceName }}</el-col>
            <el-col :span="10" class="pop-text-wrap">
              用车订单(<dict-tag style="display:inline-block;color: #369AFE" :options="dict.type.sys_order_status":value="item.orderStatus"/>)
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">订单编号: {{ item.orderNo }}</el-col>
          </el-row>
        </div>
        <div v-if="item.type===5">
          <el-row>
            <el-col :span="6">{{rentalType[Number(item.rentalType)]}}</el-col>
            <el-col :span="10">实取:{{ item.actualStartTime }}</el-col>
            <el-col :span="8">{{ item.takeStoreName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">{{rentalType[Number(item.rentalType)]}}</el-col>
            <el-col :span="10" v-if="item.orderStatus>4">实还:{{ item.actualEndTime }}</el-col>
            <el-col :span="10" v-else>预还:{{ item.actualEndTime }}</el-col>
            <el-col :span="8">{{ item.alsoStoreName }}</el-col>
          </el-row>

          <el-row style="text-align: right !important;">
            <el-button v-if="item.length>1" type="primary" @click="showOrderOverviewDialog(item, true, scope.row.carNo)">查看</el-button>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="14"> 客户姓名: {{item.memberName}}/{{ item.memberPhone }}</el-col>
            <el-col :span="10" class="pop-text-wrap">
              <el-tag type="success" v-for="(label, index) in item.labelClassify" :key="index" >
                <dict-tag :options="dict.type.label_classify" :value="label" />
              </el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16" v-if="item.carNo"> 车辆: {{ item.carNo }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="14"> 订单来源: {{ item.orderSourceName }}</el-col>
            <el-col :span="10" class="pop-text-wrap"> 已还车( <dict-tag style="display:inline-block;color: #369AFE" :options="dict.type.sys_order_status" :value="item.orderStatus"/> ) </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">订单编号: {{ item.orderNo }}</el-col>
          </el-row>
        </div>
        <div v-if="item.type===3">
          <el-row>
            <el-col :span="24">借出开始时间:{{ item.secondmentStartTime }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="item.actualEndTime">借出结束时间:{{ item.actualEndTime }}</el-col>
            <el-col :span="24" v-else>借出结束时间:{{item.secondmentEndTime}}&nbsp;[预计]</el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="16"> 同行名称: {{ item.secondmentStore }}</el-col>
            <el-col :span="8" class="pop-text-wrap" style="color: #23BCCA">外借</el-col>
          </el-row>
          <el-row>
            <el-col :span="24"> 同行联系人:{{ item.secondmentPerson }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">联系电话: {{ item.secondmentPhone }}</el-col>
          </el-row>
        </div>
        <div v-if="item.type===4">
          <el-row>
            <el-col :span="24">调拨开始时间:{{ item.secondmentStartTime }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">调拨结束时间:{{ item.secondmentEndTime || '--' }}</el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="16">调拨门店: {{ item.secondmentStore }}</el-col>
            <el-col :span="8" class="pop-text-wrap" style="color: #999">调出</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">联系人:{{ item.secondmentPerson }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">联系电话: {{ item.secondmentPhone }}</el-col>
          </el-row>
        </div>
        <div v-if="item.type===6">
          <el-row>
            <el-col :span="24">下线时间:{{ item.offLineTime }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">下线原因:{{ item.reason || '--' }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">上线时间:{{ item.onLineTime || '--' }}</el-col>
          </el-row>
        </div>


        <template v-if="item.length&&item.length===1">
          <!--            <el-button slot="reference" v-if="item.type===1||item.type===2||item.type===5" :class="item.conflictOrNot===1?'conflict-or-not':className[item.type]" style="width:calc(100% + 2px)" @click="showOrderOverviewDialog(item, true, scope.row.carNo)">-->
          <!--              <template v-if="itm.timestamp==item.endTimeStamp">-->
          <!--                <div class="paiban-item-wrap">-->
          <!--                  <i v-if="item.type===1&&item.isItAWarning===1" class="el-icon-warning paiban-warn"></i>-->
          <!--                  <span class="order_source">{{ item.orderSourceName.substring(0, 1) }}</span>-->
          <!--                  <span class="order_source" v-if="item.type===1">{{ item.isPlatoon == 1 ? "已" : "未" }}</span>-->
          <!--                </div>-->
          <!--              </template>-->
          <!--            </el-button>-->
          <!--            <el-button v-else-if="item.type===3" slot="reference" class="callOut" style="width:calc(100% + 2px)">借出</el-button>-->
          <!--            <el-button v-else-if="item.type===4" slot="reference" class="callOut" style="width:calc(100% + 2px)">调出</el-button>-->
          <!--            <el-button v-else-if="item.type===6" slot="reference" class="callOut" style="width:calc(100% + 2px)">{{item.reason}}</el-button>-->
        </template>
        <template v-else>
          <div class="order-divider"></div>
          <template v-if="index3==1">
            <!--              <el-button slot="reference" v-if="item.type===1||item.type===2||item.type===5" :class="item.conflictOrNot===1?'conflict-or-not':className[item.type]" style="width:calc(100% + 2px)">-->
            <!--                <template v-if="itm.timestamp==item.endTimeStamp">-->
            <!--                  <div class="paiban-item-wrap-count">-->
            <!--                    <i v-if="item.type===1&&item.isItAWarning===1" class="el-icon-warning paiban-warn"></i>-->
            <!--                    <span class="order_source">{{ item.orderSourceName.substring(0, 1) }}</span>-->
            <!--                    <span class="order_source" v-if="item.type===1">{{ item.isPlatoon == 1 ? "已" : "未" }}</span>-->
            <!--                  </div>-->
            <!--                </template>-->
            <!--                <div class="order_count"><span class="order_source">{{ item.length }}</span></div>-->
            <!--              </el-button>-->
            <!--              <el-button v-else-if="item.type===3" slot="reference" class="callOut" style="width:calc(100% + 2px)">借出-->
            <!--                <div class="order_count"><span class="order_source">{{ item.length }}</span></div></el-button>-->
            <!--              <el-button v-else-if="item.type===4" slot="reference" class="callOut" style="width:calc(100% + 2px)">调出-->
            <!--                <div class="order_count"><span class="order_source">{{ item.length }}</span></div></el-button>-->
            <!--              <el-button v-else-if="item.type===6" slot="reference" class="callOut" style="width:calc(100% + 2px)">{{item.reason}}-->
            <!--                <div class="order_count"><span class="order_source">{{ item.length }}</span></div></el-button>-->
          </template>
        </template>
      </template>
      <template v-else>
        <el-row>
          <el-col :span="24">日租金:{{ item.price || '--' }}元</el-col>
        </el-row>
        <!--          <el-button slot="reference" class="free" style="width:calc(100% + 2px)"></el-button>-->
      </template>
    </template>


    <el-dialog title="订单详情" width="800px" append-to-body destroy-on-close :visible.sync="showOrderOverview">
      <ScheduleOrderOverview @refresh="handleQuery" :orderData="orderData" v-if="showOrderOverview" @cancel="showOrderOverview = false"></ScheduleOrderOverview>
    </el-dialog>

  </div>

</template>

<script>
import ScheduleOrderOverview from "@/views/components/ScheduleOrderOverview";

export default {
  data() {
    return {
      orderData: {},
      showOrderOverview: false,
      rentalType: {
        1: '到店取还车',
        3: '上门送取车',
        4: '上门送车',
        5: '上门取车',
      },
    };
  },
  components: {ScheduleOrderOverview},
  dicts: ['sys_order_source', 'sys_order_status', 'label_classify'],
  props: {
    itemData: {
      type: Array,
      default:()=>{
        return []
      }
    }
  },
  // watch:{
  //   carData:{
  //     handler(newVal, oldVal){
  //       console.log('bianhua',newVal)
  //       this.form.carNo = newVal
  //     },
  //     deep:true
  //   }
  // },
  mounted() {

  },
  methods: {
    showOrderOverviewDialog(item, isBook, carNo) {
      console.log('订单信息', item)
      item.isBook = isBook
      if (carNo && !item.carNo) {
        item.carNo = carNo
      }
      this.orderData = item
      this.showOrderOverview = true
    },

    handleQuery(){
      //刷新一下
    }
  },
};
</script>

<style scoped>

</style>
